<template>
  <div>
    <!-- <SecHeader /> -->

    <div class="content">
      <div class="left">
        <LeftUp class="left_up" @select="select" />
        <LeftDown class="left_down" :key="timer" />
      </div>
      <Amap @complete="complete" @click="mapClick" class="container-map"></Amap>
      <div class="right">
        <RightUp class="right_up" />
        <RightCenter class="right_center" />
        <RightDown class="right_down" />
      </div>
    </div>

    <img src="../../assets/bg2.png" class="bgimg" />
  </div>
</template>

<script setup>
import SecHeader from "../../components/SecHeader.vue";

import LeftUp from "./component/LeftUp.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightCenter from "./component/RightCenter.vue";
import RightDown from "./component/RightDown.vue";

import { ref, watch, onMounted } from "vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { useDeviceStore } from "@/stores/device";
import { useLandStore } from "@/stores/land";
const deviceStore = useDeviceStore()
const landStore = useLandStore()
let map = null;

const complete = (e) => {
  map = e
  
  getDeviceList()
}


const getDeviceList = async () => {
  
  if(!map ){
    return
  }
  map.clearMap();
  
  for(let item of deviceStore.deviceList){
    var randomNumber = (Math.floor(Math.random() * 200) - 100) / 100000;

    let position = [landStore.land.lng + randomNumber, landStore.land.lat + randomNumber]
   
    let newmarker = new AMap.Marker({
      position: position,
      anchor: 'bottom-center',
      map: map
    });
    let text = new AMap.Text({
      text: item.name,
      anchor: 'center', // 设置文本标记锚点
      angle: 0,
      offset: new AMap.Pixel(0, -50),
      style: {
        'text-align': 'center', background: '#00bfe0', border: 'none', color: '#fff', 'font-size': '16px', 'box-shadow': '0 0 5px 0 rgba(0, 0, 0, 0.5)', padding: '5px 10px'
      },
      position: position,
      map
    });
    

    const clickHandler = (e, d) => {
      let weather = ['', '无', '台风', '暴雨']

      var content = `
        <div style="background: #154c5c;border-radius: 5px;border: 1px solid #24ab9a;z-index: 99; font-size:16px">
          <div style="margin: 10px;display: flex; justify-content: space-between;">
            <div style="font-weight: bold;color: #ffffff;text-shadow: 0px 2px 5px #003f85;padding: 0 15px 0 0;">${item.name}</div>
          </div>
          <div style="color: #ffffff; margin: 10px;">${deviceStore.getCategoryName(item.category)}</div>
         
          </div>
      `;
      
      var infoWindow = new AMap.InfoWindow({
        anchor: "top-center",
        isCustom: true,
        content: content,
      });
      infoWindow.open(map, position);
    }

    AMap.Event.addListener(newmarker, "click", clickHandler);
    AMap.Event.addListener(text, "click", clickHandler);
  }


  map.setFitView(undefined, false, [160, 160, 160, 160]);

}

const mapClick = () => {
  map.clearInfoWindow();
}


watch(() => deviceStore.deviceList, () => {
  getDeviceList()

  
})

onMounted(() => {
  // 绘制地块范围
  // if (landStore.land.scope) {
  //     let path = JSON.parse(landStore.land.scope)
      
  //     path = path.map((obj) => {
  //       return [obj.lng, obj.lat];
  //     });
  //     let polygon = new AMap.Polygon({
  //       path: path,
  //     })
  //     map.add(polygon);
  //   }
})

</script>

<style scoped lang="scss">
.bgimg {
  // width: 100%;
  // height: 100%;
  height: vh(800);
  width: vw(1440);
  z-index: 5;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.container-map {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  box-shadow: 0 0 vw(80) vw(40) rgba(30, 73, 98, 1) inset;

  z-index: 0;
}
.content {
  display: flex;
  justify-content: space-between;

  position: relative;
}
.left {
  width: 27%;
  z-index: 10;
}
.left_up {
  /* margin: 10px;
  height: 375px; */
  margin: vh(10) vw(10);
  height: vh(350);
}
.left_down {
  margin: vh(10) vw(10);
  height: vh(350);
}
.center {
  /* flex-grow: 1; */
  width: 46%;
}
.right {
  width: 27%;
  z-index: 10;
}
.right_up {
  margin: vh(10) vw(10);
  height: vh(230);
}
.right_center {
  margin: vh(10) vw(10);
  height: vh(230);
}
.right_down {
  margin: vh(10) vw(10);
  height: vh(230);
}
</style>